<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文件自定义上传</title>
    <script src="./js/vue@3.5.12.global.js"></script>
    <script src="./js/axios.js"></script>
    <style>
        #upload{
            display: none;
        }
        #avatar{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div id="app">
    <form action="#" onsubmit="return false" >
        <p>账号：<input type="text" name="username" v-model="account"></p>
        <p>密码：<input type="password" name="password" v-model="pwd"></p>
        <p><label for="upload">选择头像:</label><input  ref="avatar" id="upload" @change="getFile" type="file" name="avatar"/></p>
        <p><img id="avatar" ref="img"  src="./images/default.jpg" alt=""></p>
        <p><button @click="save">提交</button></p>
    </form>
</div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                account: 'admin',
                pwd: '123456',
                avatar:{} //头像
            }
        },
        methods:{
            //只要文件域中的文件发生了变化，就会触发这个函数的执行
            getFile(){
                //获取选择的文件
                let file = this.$refs.avatar.files[0] ; //获取第一个文件
                console.log(file);
                //获取文件的名称（包括后缀名）
                console.log(file.name);
                //获取文件的大小
                console.log(file.size);
                this.avatar = file;
                //获取图标标签
                let img = this.$refs.img;
                //console.log(img)
                //创建一个流对象
                let reader = new FileReader();
                //读取头像
                reader.readAsDataURL(file);
                //为img标签重新设置图片
                reader.addEventListener('load',()=>{
                    //将流中的对象赋值给图像标签
                    img.src = reader.result;
                })
            },
            //向远程提交数据
            save(){
                console.log('账户：',this.account)
                console.log('密码:',this.pwd)
                console.log('头像:',this.avatar)
                //只要涉及到数据新增，修改，建议使用formData封装数据
                let formData = new FormData();
                formData.append('account',this.account)
                formData.append('password',this.pwd)
                formData.append('avatar',this.avatar)
                //post请求
                axios.post('/api/user',formData)
                    .then(resp=>{
                        console.log(resp)
                    })
                    .catch(error=>{
                        console.log(error);
                    });
            }
        }
    })
    app.mount('#app')
</script>
</html>